<template>
  <el-card>
      <el-tabs v-model="active">
          <el-tab-pane label="登录账户设置" name="first">
              <el-form ref="form" :rules="rules" style="width: 450px;margin: 100px auto;" :model="form">
                <el-form-item label="姓名" prop="username" label-width="80px">
                    <el-input v-model="form.username"></el-input>
                </el-form-item>
                <el-form-item label="密码" prop="password" label-width="80px">
                    <el-input type="password" v-model="form.password"></el-input>
                </el-form-item>
                <el-form-item label-width="80px">
                    <el-button @click="save" type="primary">更新</el-button>
                    <el-button @click="$router.back()">取消</el-button>
                </el-form-item>
              </el-form>
          </el-tab-pane>
          <el-tab-pane label="个人详情" name="second">
              <emp-info />
          </el-tab-pane>
          <el-tab-pane label="岗位信息" name="third">
              <job-info />
          </el-tab-pane>
      </el-tabs>
  </el-card>
</template>

<script>
import { userProfile } from '@/api/user'
import { saveUserInfo } from '@/api/employees'
// 导入组件
import EmpInfo from './components/EmpInfo.vue'
import JobInfo from './components/JobInfo.vue'
export default {
    name: 'empDetail',
    components: {
        JobInfo, EmpInfo
    },
    data () {

        return {
            active: 'first',
            form: {},
            rules: {
                username: [ { required: true, message: '请输入姓名', trigger: 'blur'} ],
                password: [ { required: true, message: '请输入密码', trigger: 'blur'} ],
            }
        }
    },

    created () {

        this.getProfile()
    },

    methods: {
        // 加载数据
        async getProfile () {
            let res = await userProfile(this.$route.query.id)
            this.form = res.data
        },

        // 更新
        save () {
            this.$refs.form.validate (async v => {
                if (v) {
                    let res = await saveUserInfo(this.form)
                    this.$message.success(res.message)
                }
            })
        }
    }
}
</script>

<style>

</style>